<template>
	<u-sticky bgColor="#F5F6F8">
		<view class="tabs">
			<u-tabs itemStyle="height: 100rpx;width: 50%;font-size: 30rpx;'" lineColor="#5780EF"
				activeStyle="color: #5780EF;" inactiveStyle="color: #606672;" :current="current" :list="tabsList"
				@click="tabsChange"></u-tabs>
		</view>
	</u-sticky>

	<view class="list" v-show="current == 0">
		<view class="item" v-for="(item, i) in couponList" :key="i">
			<view class="icon">
				<u-image width="180rpx" height="180rpx" :src="getServerStatic('/static/images/a21.png')"></u-image>
			</view>
			<!-- 左上角 -->
			<view class="count-box">
				剩余{{ item.coupon_num }}张
			</view>
			<view class="left" :style="{paddingTop: '30rpx'}">
				<view class="user-info">
                    <view class="name" v-if="item.coupon_type == 1">购药抵扣券</view>
					<view class="name" v-if="item.coupon_type == 2">门诊预约免减券</view>
				</view>

                <view class="mobile" v-if="item.coupon_type == 1">
                    抵扣券可在购买商品时使用
                </view>
				<view class="mobile" v-if="item.coupon_type == 2">
                    免减券可在预约挂号时使用
				</view>

				<view class="adreess" v-if="current == 1">
					<view class="">沈阳翊博中医浑南区诊室</view>
					<view class="">2023-02-19  13:36:48</view>
				</view>

			</view>
			<view class="right">
				<view class="price-box" v-if="item.coupon_type == 1">
					<text>{{ item.coupon_par_value }}</text>
					<text class="yuan">元</text>
				</view>

				<u-button throttleTime="1000"
					:customStyle="{width: '154rpx', height: '66rpx', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)', letterSpacing: '.1rem'}" :hairline="false"
					type="mini" shape="circle" color="#516DDB" @click="goPagesHome(item)">
                    去使用
                </u-button>
			</view>
		</view>
	</view>


	<view class="list" v-show="current == 1">
		<view class="item" v-for="(item, i) in couponUseRecordList" :key="i">
			<view class="icon">
				<u-image width="180rpx" height="180rpx" :src="getServerStatic('/static/images/a21.png')"></u-image>
			</view>
			<view class="left" :style="{paddingTop: '0rpx'}">
				<view class="user-info">
                    <view class="name" style="color: #999999;" v-if="item.coupon_type == 1">购药抵扣券</view>
					<view class="name" style="color: #999999;" v-if="item.coupon_type == 2">门诊预约免减券</view>
				</view>

                <view class="mobile" v-if="item.coupon_type == 1 && item.store">
                    {{ item.store.name }}
                </view>
				<view class="mobile" v-if="item.coupon_type == 2 && item.store">
                    {{ item.store.name }}
				</view>
			</view>
			<view class="right">
				<view class="price-box" v-show="item.coupon_type == 1">
					<text style="color: #999999;">{{ item.coupon_par_value }}</text>
					<text class="yuan" style="color: #999999;">元</text>
				</view>

                <view style="position: absolute;bottom: -20rpx;right: 4px; font-size: 26rpx;color: #999999;width: 258rpx;">{{ item.usage_at }}</view>
			</view>
		</view>
	</view>


</template>

<script setup>
    import {ref, reactive, readonly} from 'vue'
    import {onLoad, onShow} from '@dcloudio/uni-app'
    import {getCoupons, getCouponUseRecords} from "@/api/coupon";
    import {getServerStatic} from "@/utils/tool";

	const current = ref(0)
	const tabsList = ref([{
			name: '我的礼包'
		},
		{
			name: '使用记录'
		},
	])
	const tabsChange = (e) => {
		current.value = e.index
	}
	const goReservation = () => {
		uni.navigateTo({
			url: '/mine/reservation/reservation'
		})
	}

	const goPagesHome = (item) => {
        if (item.coupon_type == 1) {
            uni.navigateTo({
                url: '/pages/home/home'
            })
        }

        if (item.coupon_type == 2) {
            uni.navigateTo({
                url: '/mine/reservation/reservation'
            })
        }
	}

    onLoad((evt) => {
        handleGetCoupons()
        handleGetCouponUseRecords()
    })

    // 未使用卡劵
    const couponList = ref([])

    const handleGetCoupons = async () => {
        const {code, data} = await getCoupons({})
        if (code == 1) {
            couponList.value = data
        }
    }

    // 使用记录
    const couponUseRecordList = ref([])

    const handleGetCouponUseRecords = async () => {
        const {code, data} = await getCouponUseRecords({})
        if (code == 1) {
            couponUseRecordList.value = data
        }
    }

</script>

<style lang="scss" scoped>
	.list {
		padding: 50rpx 26rpx;
		.item {
			@include between(100%);
			position: relative;
			margin-bottom: 30rpx;
			padding: 30rpx 38rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
            box-shadow: 0 0 20rpx 1rpx rgba(187,187,187,.16);
            min-height: 200rpx;

			.icon {
				position: absolute;
				top: 0;
				right: 38rpx;
				z-index: 99;
			}
			.count-box {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 99;
				@include center(144rpx, 50rpx);
				background: #ECF1FE;
				border-radius: 30rpx 0rpx 20rpx 0rpx;
				color: #5780EF;
			}

			.user-info {
				@include between(100%);
				.name {
					font-size: 34rpx;
					color: #312C2A;
				}
				.price-box {
					color: #999999;
					font-weight: bold;
					font-size: 46rpx;
					.yuan {
						font-size: 26rpx;
					}
				}
			}
			.mobile {
				margin-top: 18rpx;
				font-size: 26rpx;
				color: #999999;
			}
			.adreess {
				margin-top: 18rpx;
				@include between(100%);
				color: #999999;
			}
			.left {
				// padding-top: 30rpx;
				width: 100%;
			}
			.right {
				position: relative;
				z-index: 99;
				@include center();
				flex-direction: column;
				.price-box {
					font-weight: bold;
					color: #F55726;
					font-size: 46rpx;
					margin-bottom: 10rpx;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    vertical-align: middle;
					.yuan {
						font-size: 26rpx;
					}
				}
			}
		}
	}
</style>
